<template>
	<view class="bgInfo">
		<view class="main">
			<view class="tongzhi" :style="{backgroundImage:'url('+tzimg+')',backgroundRepeat:'no-repeat'}">
				<image :src="getImgUrl('/img/missimg/tongzhi.png')" mode="" class="tz_img"></image>
				<text class="tz_ft">向左滑动删除档案</text>
			</view>
				<no-more v-if="show && pageNo == 1"></no-more>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" :enable-back-to-top="true" :lower-threshold="30"
				@scrolltolower="loadMore" @scrolltoupper="refresh" style="height: 80vh;">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item,index) in data" :key='index'
						@click="bindClick(item.id,item.avatar,index,$event,item.realname,item.sex,item.birthPlace,item.relationship,item.currentAddress,item.birthday,item.lunarBirthday)"
						:right-options="options2">
						<view class="slot-button"
							@click="update(item.id,item.avatar,index,$event,item.realname,item.sex,item.birthPlace,item.relationship,item.currentAddress,item.birthday,item.lunarBirthday)">
							<view class="left_img">
								<image
									:src="item.avatar == null ? 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300' : item.avatar"
									style="width: 104rpx;height: 104rpx;border-radius: 50%;opacity: 1;" mode="aspectFill">
								</image>
								<view class="left_ft">
									<view class=" left_title">
										{{item.realname}}
									</view>
									<view class="left_bt">
										<text>{{item.sex == 0 ? '未知' : item.sex == 1 ? '男' : item.sex == 2 ? '女' : ''}}</text>
										<text class="left_age">{{item.age}}</text>
										<text class="left_time">{{item.birthday}}</text>
									</view>
								</view>
							</view>
							<view class="right_own">
								<view class="own">
									{{item.relationship}}
								</view> <uni-icons custom-prefix="right" type="right" size="20"></uni-icons>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<!-- <u-loadmore :show="showLoadMore" :loading="loading" :text="loadMoreText" :top-method="loadMore"
					:bottom-method="loadMore"></u-loadmore>
				</uni-scroll-view> -->
			</scroll-view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="同意" title="提示" content="确定要删除吗?"
					@confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>

			<button class="footer_btn" @click="addsub">添加档案</button>
	</view>
</template>
<script>
	import {
		imgBaseUrl
	} from '@/utils/baseUrl.js'
	import {
		userDetails,
		userDetailsdel
	} from '@/utils/OnetoOneaApi.js'
	import {
		baseURL
	} from '../../../utils/baseUrl.js'
	import noMore from '../../../components/no-data/no-more.vue';
	export default {
		components:{noMore},
		data() {
			return {
				tzimg: imgBaseUrl + '/img/missimg/tzbeijing.png',
				show: false,
				baseUrl: '',
				options2: [{
					text: '删除',
					style: {
						color: '#000000',
						backgroundColor: '#F56C6C',
					}
				}],
				data: [],
				page: 1,
				pageSize: 10,
				showLoadMore: true,
				loading: false,
				loadMoreText: '加载更多',
				id: '',
				idx: '',
				imgs: ''
			}
		},
		onShow() {
			this.baseUrl = baseURL;
			this.Datalist()
		},
		onHide(){
			this.show = false
		},
		methods: {
			//我的档案列表
			async Datalist() {
				let params = {
					pageNo: this.page,
					pageSize: this.pageSize
				}
				const res = await userDetails(params)
				if(!res.result.records.length){
					this.show = true
				}
				this.data = res.result.records
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + '/' + image;
			},
			//删除
			async bindClick(id, imgurl, index, e, realname, sex, birthPlace, relationship, currentAddress, birthday,
				lunarBirthday) {
					console.log(relationship,'reeeee');
					if(relationship == '本人')
					{
						uni.showToast({
							title: '无法删除本人',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2000
						})
					}else
					{
						if (e.content.text == '删除') {
							this.$refs.alertDialog.open()
							this.id = id
							this.idx = index
							this.imgs = imgurl
						
						}
					}
			},
			//点击查看和编辑
			update(id, imgurl, index, e, realname, sex, birthPlace, relationship, currentAddress, birthday,
			lunarBirthday) {
				console.log('1111');
				this.page = 1
				this.pageSize = 10
				let status = 'update'
				uni.navigateTo({
					url: `../../../subPackagesA/pages/addRecord/addRecord?Id=${id}&imgurl=${imgurl}&realname=${realname}&sex=${sex}&birthPlace=${birthPlace}&status=${status}&relationship=${relationship}&currentAddress=${currentAddress}&birthday=${birthday}&lunarBirthday=${lunarBirthday}`
				})
			},
			//添加档案
			addsub() {
				const status = 'add'
				this.page = 1
				this.pageSize = 10
				uni.navigateTo({
					url: `../../pages/addRecord/addRecord?status=${status}`
				})
			},
			// 下拉刷新
			async loadMore() {
				this.page++
				let params = {
					pageNo: this.page,
					pageSize: this.pageSize
				}
				const res = await userDetails(params)
				this.data = [...this.data, ...res.result.records]
			},
			async dialogConfirm() {
				const res = await userDetailsdel(this.id)
				if (res.code == 200) {
					this.data.splice(this.idx, 1)
					uni.showToast({
						title: '删除成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// uni.setStorageSync('userInfo', res.result)
					// uni.removeStorageSync('userInfo')
				} else {
					uni.showToast({
						title: '删除失败',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})

				}
			}
		}
	};
</script>
<style lang='less' scoped>
	.bgInfo {
		width: 100%;
		height: 100vh;
		background-color: #F5F5F7;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.main {
			padding: 25rpx 25rpx 25rpx 25rpx;

			.tongzhi {
				/* width: 686rpx; */
				height: 80rpx;
				background: #FFFBF9;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				justify-content: left;
				align-items: center;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF7F22;
				opacity: 1;

				.tz_img {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-left: 28rpx;

					.tz_ft {
						margin-left: 13rpx;
						letter-spacing: 2rpx;
					}
				}
			}



			.slot-button {
				height: 165rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				margin-top: 20rpx;

				.left_img {
					display: flex;
					align-items: center;

					.left_ft {
						margin-left: 20rpx;
						line-height: 44rpx;
						letter-spacing: 2rpx;

						.left_title {
							font-size: 32rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.left_bt {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;

							.left_age {
								margin-left: 16rpx;
							}

							.left_time {
								margin-left: 16rpx;
							}
						}
					}
				}

				.right_own {
					display: flex;
					align-items: center;

					.own {
						padding-right: 15prx;
					}
				}
			}
		}

		/deep/ .uni-swipe_button-group{
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			position: absolute;
			top: 11px;
			bottom: 0;
		}
		.footer_btn {
			position: fixed;
			bottom: 30rpx;
			left: 30rpx;
			width: 690rpx;
			background: #FF7F22;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			color: #FFFFFF;
		}
	}
</style>